<template>
	<view class="content">
		<view style="padding: 20rpx;" class="">
			<view class="view">
				<view class="font-size-26">
					收卡人
				</view>
				<!-- <view @click="userpopup.open()" class="time margin-top-30 display-flex align-items">
					<view class="file-1 margin-left-10 font-size-26 ">
						{{info?.nickname || '请选择转卡人'}}
					</view>
					<view class="margin-right-10">
						<uv-icon name="arrow-down" color="#333333" size="25"></uv-icon>
					</view>
				</view> -->
				<view class="time margin-top-30">
					<input type="number" v-model="mobile" class="font-size-26" placeholder="请输入要转入人的手机号"
						maxlength="11" />
				</view>
				<view class="font-size-26 margin-top-30">
					分配卡
				</view>
				<view @click="cartpopup.open()" class="time margin-top-30 display-flex align-items">
					<view class="file-1 margin-left-10 font-size-26 ">
						去选择
					</view>
					<view class="margin-right-10">
						<uv-icon name="arrow-down" color="#333333" size="25"></uv-icon>
					</view>
				</view>
				<view class="font-size-26 margin-top-30">
					分配卡
				</view>
				<view @click="datetimePicker.open()" style="height: 200rpx;word-wrap:break-word;"
					class="time margin-top-30 ">
					<!-- <view v-if="item?.check" v-for="item,index in cartList" :key="index" class="">
						{{item.card_num}},
					</view> 	 -->
					{{plusOne.toString()}}
				</view>
				<view class="display-flex flex-direction-column center">
					<view @click="transfer_card()" class="button margin-top-120 text-center color-FFF font-size-26"
						style="padding: 25rpx 266rpx;width: 150rpx;">
						确认分配
					</view>
				</view>
				<div class="margin-top-20"></div>
			</view>
		</view>
		<uv-popup mode="bottom" :closeable="true" round="10" ref="userpopup">
			<view style="max-height: 80vh;background: #F5F5F5;overflow: scroll;">
				<view v-for="item,index in list" :key="index" @click="userpopup.close(),info = item"
					class="margin-top-20" style="padding: 20rpx;background: #FFFFFF;font-size: 26rpx;">
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							ID
						</view>
						<view class="">
							{{item.id}}
						</view>
					</view>
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							头像
						</view>
						<view class="">
							<image :src="item.avatar" style="width: 60rpx;height: 60rpx;" class="border-radius" mode="">
							</image>
						</view>
					</view>
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							名称
						</view>
						<view class="">
							{{item.nickname}}
						</view>
					</view>
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							电话
						</view>
						<view class="">
							{{item.mobile}}
						</view>
					</view>
				</view>
				<div class="kong"></div>
			</view>
		</uv-popup>
		<uv-popup mode="bottom" :closeable="true" round="10" ref="cartpopup">
			<view style="max-height: 80vh;background: #F5F5F5;overflow: scroll;">
				<view v-for="item,index in cartList" :key="index" @click="item.check = !item.check"
					class="margin-top-20 display-flex align-items"
					style="padding: 20rpx;background: #FFFFFF;font-size: 26rpx;">
					<uv-icon v-if="!item.check" name="checkmark-circle" color="#666666" size="25"></uv-icon>
					<uv-icon v-else name="checkmark-circle-fill" color="#2671CE" size="25"></uv-icon>
					<view class="file-1 margin-left-30">
						<view class="display-flex align-items">
							<view style="width: 100rpx;">
								ID
							</view>
							<view class="">
								{{item.id}}
							</view>
						</view>
						<view class="display-flex align-items">
							<view style="width: 100rpx;">
								卡编号
							</view>
							<view class="">
								{{item.card_num}}
							</view>
						</view>
					</view>
				</view>
				<div class="kong"></div>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const info = ref({})
	const mobile = ref('')
	//分页
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([])
	const userpopup = ref()
	const cartpopup = ref()
	const cartList = ref([])
	onLoad(function(option) {
		info.value = option
		son_list()
		card_list()
	});

	onShow(function() {});
	const plusOne = computed(() => {
		let array = cartList.value.filter(item => item.check)
		return array.map(item => item.card_num)
	})
	async function transfer_card() {
		console.log(plusOne._value);
		let object = {
			mobile: mobile.value,
			card_nums: plusOne._value.toString()
		}
		console.log(object);
		const {
			code,
			data
		} = await api.transfer_card(object)
		if (code == 1) {
			nativeUI('转卡成功！')
			navigateBack(2000)
		}
	}
	async function card_list() {
		console.log(1);
		const {
			code,
			data
		} = await api.card_list({
			limit: '9999',
			page: '1',
			status: 0
		})
		if (code == 1) {
			cartList.value = data.list.data.map(item => {
				item.check = false
				return item
			})
			console.log(cartList.value);
		}
	}
	async function son_list() {
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.son_list({
				page: page.value,
				limit: '9999',
			})
			list.value = list.value.concat(data.list.data)
			if (data.current_page == data.last_page) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		son_list()
	});
</script>

<style scoped lang="scss">
	.time {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #333333;
	}

	.view {
		padding: 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;

	}
</style>